<template>
    <div>
        <Header></Header>
        <div class="studentMain" :style="{'background':(styles ? styles : '#1876d2')}">
            <styleModal @styleids="changeStyleFn" v-if="isChStShow"></styleModal>
            <div class="headerBox">
                <div class="headerCenter">
                    <h3>
                        {{userInfo.name || user.userName}}
                        <label>{{userInfo.role_id == 9?'家长':userInfo.role_id == 8?'老师':'学生'}}</label>
                    </h3>
                    <span>{{loadBindInfoP.signature ? loadBindInfoP.signature : ''}}</span>
                </div>
            </div>
            <studentNav :userInfo='userInfo'></studentNav>
            <div class="content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import styleModal from "@c/Style/changeStyle.vue"
    import studentNav from "@c/navigation/studentNav.vue"
    import Header from "@c/Header/head";
    export default {
        components: {
            styleModal,
            studentNav,
            Header
        },
        computed: {
            ...mapState({
                user: state => state.userModule.user,
                userInfo: state => state.userModule.userInfo
            })
        },
        data() {
            return {
                isChStShow: false, //是否显示空间装扮控制
                activeIndex: '1',
                styles: '#f1f1f1',
                loadBindInfoP: {}
            }
        },
        methods: {
            getList(){
                this.$store.dispatch('homeModule/loadBindInfo').then(res => {
                    if(res){
                        this.loadBindInfoP = res
                    }
                })
            },
            handleSelect(key, keyPath) {
            },
            changeStyleFn(payload) {
                this.styles = payload;
            },

        },
        created() {
            this.getList()
        }
    }
</script>

<style lang="scss" scoped>
    .header {
        width: 100%;
        background-color: #409EFF;

        .headerInner {
            width: 81%;
            margin: 0 auto;
            color: wheat;

            h3 {
                float: left;
                color: white;
            }

            .management {
                float: right;
                margin-top: 12px;

                .search {
                    float: left;
                    width: 400px;
                    margin-right: 40px;
                }

                .setUpThe {
                    margin-top: 10px;
                    float: left;
                    -moz-user-select: none;
                    -webkit-user-select: none;
                    -ms-user-select: none;
                    -khtml-user-select: none;
                    user-select: none;

                    label {
                        color: white;
                        margin-right: 20px;
                        font-size: 14px;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .studentMain {
        overflow: hidden;

        .headerBox {
            width: 100%;
            height: 350px;
            overflow: hidden;
            background: url("../../../assets/img/studentsBgh.jpg") top no-repeat;
            background-size: 100%;

            .headerCenter {
                width: 81%;
                margin: auto;
                height: 350px;
                position: relative;

                span {
                    position: absolute;
                    top: 55%;
                    left: 0;
                    color: #fff;
                }

                h3 {
                    position: absolute;
                    color: #fff;
                    top: 30%;
                    left: 0;
                    font-weight: bold;
                    font-size: 32px;

                    label {
                        background: #409EFF;
                        color: #fff;
                        font-size: 14px;
                        padding: 5px;
                        border-radius: 5px;
                        margin-left: 30px;
                    }
                }
            }

        }

        .content {
            width: 81%;
            margin: 30px auto;
            overflow: hidden;
        }
    }
</style>